{% extends "PlatBundle::layout.html.twig" %}

    {% block title %}忘记密码{% endblock %}

    {% block css %}{% endblock %}


    {% block top %}{% endblock %}

    {% block body %}
        <div class="login-wrapper">
            <div class="auth-box">
                <div class="login-layout">
                    <div class="back-title">找回密码</div>

                    <div class="auth-mes">
                        <div class="auth-input">
                            <span class="auth-i-left">手机号码</span>
                            <input type="text" class="back-input" name="phone" placeholder="手机号">
                        </div>

                        <div class="salt-box">
                            <div class="auth-input fl" style="margin-top: 20px;">
                                <span class="auth-i-left">短信验证码</span>
                                <input type="text" class="salt-input" name="salt" placeholder="请输入短信验证码">
                            </div>
                            <div class="fr">
                                <button class="salt-btn" id="smal-mess">获取验证码</button>
                            </div>
                        </div>

                        <div class="auth-input" style="margin-top: 20px;">
                            <span class="auth-i-left">新密码</span>
                            <input type="password" class="back-input" name="new_password" placeholder="请设置新的密码">
                        </div>

                        <div class="auth-input" style="margin-top: 20px;">
                            <span class="auth-i-left">确认密码</span>
                            <input type="password" class="back-input" name="repeat_password" placeholder="请再次输入新的密码">
                        </div>
                    </div>

                    <a class="forget-text" href="{{ path('plat_auth_login') }}">返回登录</a>

                    <button class="auth-btn">保存修改</button>
                </div>
            </div>

            <div class="l-copyright">Copyright @ 2001-2017 All right Reserved</div>
        </div>

    {% endblock %}

{% block right_body %}
{% endblock %}

{% block javascript %}
    <script type="text/javascript">
        $(function() {
            $('.w-icon').on('click', function() {
                $(this).toggleClass('y-icon');
            });

            // 获取验证码
            //  短信验证码发送时间
            var countdown = 59;
            var this_input = document.getElementById("smal-mess");
            function settime() {
                if (countdown == '-1') {
                    this_input.removeAttribute("disabled");
                    this_input.innerHTML = "短信验证码";
                    countdown = 59;
                } else {
                    this_input.setAttribute("disabled", true);
                    this_input.innerHTML = "重新发送(" + countdown + ")";
                    countdown --;
                    setTimeout(function() {
                        settime()
                    },1000)
                }
            }

            //  点击获取验证码
            $(".salt-btn").on('click',function(){
                var num = $.trim($('input[name="phone"]').val());

                if(num == ""){
                    popStatus(2, '请输入手机号', 1,'', true);
                    return;
                }
                if(!(/^1[3|4|5|7|8]\d{9}$/.test(num))){
                    popStatus(2, '手机号码格式错误', 1,'', true);
                    return;
                }

                //ajax获取短信验证码

                $.post('{{ path('api_public_get_salt',{platform:'web'}) }}',{phone:num,type:4,role:4},function(data){
                    console.log(data);

                    if(data.errorCode == 0) {
                        popStatus(1, data.message, 2,"", true);
                        settime();
                    } else {
                        popStatus(2, data.message, 1,"", true);
                    }
                });
            });


            // 点击修改密码
            $('.auth-btn').on('click', function() {
                var phone = $.trim($('input[name="phone"]').val());
                var salt = $.trim($('input[name="salt"]').val());
                var new_password = $.trim($('input[name="new_password"]').val());
                var repeat_password = $.trim($('input[name="repeat_password"]').val());

                if (phone == '') {
                    popStatus(2, '请输入手机号码', 1, '', true);
                    return;
                }

                if(!(/^1[3|4|5|7|8]\d{9}$/.test(phone))) {
                    popStatus(2, '手机号码格式错误', 1, '', true);
                    return;
                }

                if (salt == '') {
                    popStatus(2, '请输入短信验证码', 1, '', true);
                    return;
                }

                if (new_password == '') {
                    popStatus(2, '请输入新密码', 1, '', true);
                    return;
                }

                if (repeat_password == '') {
                    popStatus(2, '请输入确认密码', 1, '', true);
                    return;
                }

                if (6 > new_password.length || new_password.length > 20) {
                    popStatus(2, '新密码长度要在6~20位之间', 1,'', true);
                    return;
                }

                if (6 > repeat_password.length || repeat_password.length > 20) {
                    popStatus(2, '确认密码长度要在6~20位之间', 1,'', true);
                    return;
                }

                if (new_password != repeat_password) {
                    popStatus(2, '新密码和确认密码不一致', 1,'', true);
                    return;
                }

                var data = {phone:phone,password:new_password,comfire_password:repeat_password,validation_code:salt,role:4};


                $.post("{{ path('api_platform_auth_forget_password') }}",data,function(data){
                    console.log(data);

                    if(data.errorCode == 0){
                        popStatus(1, data.message, 1,"{{ path('plat_auth_login') }}", true);
                    } else {
                        popStatus(2, data.message, 1,'', true);
                    }
                })

            })
        })
    </script>
{% endblock %}

